<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>innerHTML与createElement有何不同</title>
	</head>
	<body>
		<div class="inner"></div>
		<div class="create"></div>
		<script>
			var inner = document.querySelector('.inner');
			var create = document.querySelector('.create');
			var loopCount = 3000;
			// 第一种方式，叫做innerHTML字符串拼接的方式创建元素
			var start = +new Date();
			for(var i=0; i<loopCount;i++){
				inner.innerHTML += '<a href="#">字符串</a>';
			}
			var end = +new Date();
			console.log('innerHTML字符串拼接的方式耗时'+(end-start));
			// 第二种该方式createElement的方式创建元素
			var start = +new Date();
			for(var i=0; i<loopCount;i++){
				var a = document.createElement('a');
				a.innerHTML = 'create方式';
				a.href = '#';
				create.appendChild(a);
			}
			var end = +new Date();
			console.log('createElement方式耗时'+(end-start));
			// 第三种方式 数组形式一次性添加
			var start = +new Date();
			var arr=[];
			for(var i=0; i<loopCount;i++){
				arr.push('<a href="#">数组</a>');
			}
			inner.innerHTML = arr.join("");
			var end = +new Date();
			console.log('数组形式一次性添加方式耗时'+(end-start));
			/* 
			效率的比对，无论在什么浏览器下边
			 效率第一 ：数组形式一次性添加方式
			 效率第二：createElement方式
			 效率第三： innerHTML字符串拼接的方式
			 */
			
		</script>
		
	</body>
</html>